<template>
	<view>
		<van-cell is-link arrow-direction="down" :title="activeType" @click="siftChocieType"></van-cell>
		<view class="top-area">
			<!-- tab标签筛选评价的分数  即好评中评 差评 -->
			<van-tabs stikcy animated>
			  <van-tab title="全部">
					<shop-comment :commentlist="readyToRenderCommentList"></shop-comment>
				</van-tab>
			  <van-tab title="好评">
					<shop-comment :commentlist="readyToRenderCommentList.filter(item => item.score >= 4)"></shop-comment>
				</van-tab>
			  <van-tab title="中评">
					<shop-comment :commentlist="readyToRenderCommentList.filter(item => item.score === 3)"></shop-comment>
				</van-tab>
			  <van-tab title="差评">
					<shop-comment :commentlist="readyToRenderCommentList.filter(item => item.score <= 2)"></shop-comment>
				</van-tab>
			</van-tabs>
		</view>
		<van-popup
		  :show="showChoiceTypePopup"
		  position="bottom"
		  custom-style="height: 40%;padding: 30rpx"
		  @close="closePopup"
		>
		<view class="choice-area">
			<block v-for="(item, index) in choiceTypeList" :key="index">
				<van-button plain type="primary" size="small" @click="chosenCurrentBtn(item)">{{ item }}</van-button>
			</block>
		</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		onLoad(state) {
			this.goodId = state.gid
			this.getAllComment()
			this.activeType = this.choiceTypeList[0]
		},
		data() {
			return {
				// 当前商品评论信息的id值
				goodId: '',
				// 当前选项值id
				choiceid: '',
				// 商品所有评论列表
				commentList: [],
				// 带渲染的商品评论列表  默认和商品评论列表一样
				readyToRenderCommentList: [],
				// 筛选出评论中所有的款式种类
				choiceTypeList: ['无商品款式'],
				// 是否展示筛选商品款式的popup弹出层
				showChoiceTypePopup: false,
				// 当前激活的商品款式
				activeType: ''
			}
		},
		methods: {
			// 获取该商品的所有评论信息
			async getAllComment() {
				const { data: res } = await uni.$http.get('/comment', { gid: this.goodId, choiceid: this.choiceid })
				if(res.meta.status !== 200) {
					console.log(res)
					return uni.showToast({
						title: '评论获取失败',
						icon: 'error',
						duration: 1000
					})
				}
				this.commentList = res.recordset
				this.readyToRenderCommentList = this.commentList
				this.getChoiceTypeList()
			},
			// 获取该类商品所有评论中包含的款式信息
			getChoiceTypeList() {
				const arr = this.commentList.map(item => item.choicename)
				this.choiceTypeList.push(...new Set(arr))
			},
			// 展示筛选商品款式的popup弹出层 并且开始根据商品款式筛选评论
			siftChocieType() {
				if(this.commentList.length === 0) return
				this.showChoiceTypePopup = true
			},
			// 关闭展示商品款式的popup弹出层
			closePopup() {
				this.showChoiceTypePopup = false
			},
			// 当前商品款式被选中  实现进查看当前款式商品评论的功能
			chosenCurrentBtn(val) {
				this.showChoiceTypePopup = false
				this.activeType = val
				if(val === this.choiceTypeList[0]) {
					this.readyToRenderCommentList = this.commentList
				} else {
					this.readyToRenderCommentList = this.commentList.filter(item => item.choicename === val)
				}
			}
		}
	}
</script>

<style>
	.choice-area {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		font-size: 12px;
	}
	
	.van-button {
		margin: 10px;
	}
</style>
